import React,{useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter,HashRouter,Link,NavLink,Route, Switch,Redirect} from 'react-router-dom'
import Protect from './components/protect.js'
// BrowserRouter  利用的 H5 history Api; 对比VUE就是 history默认是 popState
// HashRouter     利用的是 hashChange， 对比VUE就是hash模式
// 项目中 我们需要使用 这两个组件中的一个 把 跟组件抱起来
// Link 相当于 Vue的 router-link   用来跳转对应(to属性跟的值)路径
// NavLink 用法等同于 Link ;比Link多了一个 类名
// Route 相当于  Vue的 router-view  用来展示对应路径 对应的那个组件
// Switch 用这个组件把 用到的Route包起来， 可以避免 react每一个Route都去匹配的情形
// 子路由  属于哪个组件的子路径 就在哪个组件中编写 Link和Route
// 在react中 我们可以使用search 或者 params的方式进行参数传递
// 若是 search的方式 我们可以通过 location.search 或者 this.props.location.search
// 若是 params 我们需要在编写Route组件的时候 /xxxx/:属性名， 调用的时候 我们通过 this.props.match.params

// react中的 路由懒加载  插件 react-loadable
// import Home from './components/home'
// import User from './components/user'
// import Loadable from 'react-loadable';
// let Home = Loadable({
//   loader:() => import(/*webpackChunkName:"home"*/'./components/home'),
//   loading:()=><h3>正在加载</h3>
// })
// let User = Loadable({
//   loader:() => import(/*webpackChunkName:"user"*/'./components/user'),
//   loading:()=><h3>正在加载</h3>
// })

// function myloadable(obj){
//   let {loader,loading:Loading} = obj;
//   let Bar = null;
//   return function Temp(){
//     // let [Bar,setBar] = useState(null)
//     let [flag,setFlag] = useState(false)
//     useEffect(()=>{
//       loader().then(data=>{
//         console.log(data)
//         Bar = data.default
//         setFlag(true)
//       })
//     },[])
//     console.log(Bar)
//     return <>
//       {
//         flag ? 
//         <Bar></Bar>:
//         <Loading></Loading>
//       }
//     </>
//   }
  
// }
function myloadable(obj){
  let {loader,loading:Loading} = obj;
  return class Temp extends React.Component{
    state = {
      Bar:null
    }
    componentDidMount(){
      loader().then(data=>{
        this.setState({
          Bar:data.default
        })
      })
    }
    render(){
      let {Bar} = this.state
      return <>
        {
          Bar ? 
          <Bar {...this.props}/>:
          <div>6666</div>
        }
      </>
    }
  }
  
}
let Home = myloadable({
  loader:() => import(/*webpackChunkName:"home"*/'./components/home'),
  loading:()=><h3>正在加载</h3>
})
let User = myloadable({
  loader:() => import(/*webpackChunkName:"user"*/'./components/user'),
  loading:()=><h3>正在加载</h3>
})

let Temp = ()=><h1>哈哈哈哈</h1>
class App extends React.Component {
    constructor() {
        super();
        
    }
    render() {
        return <div className=''>
        <Link  to='/home/666'>首页</Link>
        <Link  to='/user'>用户</Link>
        <NavLink to='/home'>首页</NavLink>
        <NavLink to='/user?qqq=123&www=123'>用户</NavLink>
        <Switch>
          {/* <Route path='/' exact component={Temp}></Route> */}
          {/* exact 它是精确匹配的意思  只有当前路径 与 path的值完全相等的时候才行 */}
          <Redirect path='/' exact  to='/home'></Redirect>
          {/*  当前路径若是 /  则重定向到  /home */}
          {/* <Route path='/home/:qqq' component={Home}></Route> */}
          <Protect path='/home/:qqq' component={Home}  level="3"></Protect>
          {/*  若当前页面的路径时 /home 那么 就会把上边的这一行 替换成 对应的HOme 组件 */}
          <Route path='/user' component={User}></Route>
          
          <Route path='/*'>404</Route>
        </Switch>
        </div>;
    }
}

ReactDOM.render(<BrowserRouter>
  <App/>
</BrowserRouter>,document.getElementById('root'))